<template>
  <view class="page flex-col">
    <view class="group_1 flex-col">
      <view class="text-wrapper_1 flex-col">
        <text class="text_1">宝宝成长记录</text>
      </view>
      <view class="block_1 flex-col">
        <view class="group_2 flex-row">
          <view class="image-text_1 flex-row justify-between">
            <image
              class="image_1"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG0376f3f95736aa3cf53d2b3c840c9c6a.png"
            />
            <view class="text-group_1 flex-col justify-between">
              <text class="text_2">小王子</text>
              <text class="text_3">3个月&nbsp;12天</text>
            </view>
          </view>
        </view>
        <view class="group_3 flex-row justify-between">
          <view class="block_2 flex-row">
            <view class="image-text_2 flex-col justify-between">
              <image
                class="label_1"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG82c1f87fe38f6ec59782af654c94077a.png"
              />
              <text class="text-group_2">记录喝奶</text>
            </view>
          </view>
          <view class="block_3 flex-row">
            <view class="image-text_3 flex-col justify-between">
              <image
                class="label_2"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG56c92513a103c77ad864c33e297c705c.png"
              />
              <text class="text-group_3">记录睡眠</text>
            </view>
          </view>
        </view>
        <view class="group_4 flex-row justify-between">
          <view class="group_5 flex-row">
            <view class="image-text_4 flex-col justify-between">
              <image
                class="label_3"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG3838ad249bba7083c45279c74a9cc15b.png"
              />
              <text class="text-group_4">宝宝信息</text>
            </view>
          </view>
          <view class="group_6 flex-row">
            <view class="image-text_5 flex-col justify-between">
              <image
                class="label_4"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG0a9a4df148fdb9ffa7faa9dceea30c4f.png"
              />
              <text class="text-group_5">家庭成员</text>
            </view>
          </view>
        </view>
        <view class="group_7 flex-row justify-between">
          <view class="group_8 flex-row">
            <view class="image-text_6 flex-col justify-between">
              <image
                class="label_5"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNGa353dd4dd1856211563a5f461005fec1.png"
              />
              <text class="text-group_6">宝宝日历</text>
            </view>
          </view>
          <view class="group_9 flex-row">
            <view class="image-text_7 flex-col justify-between">
              <image
                class="label_6"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG71e2c42d1c1be539f85648973966bde4.png"
              />
              <text class="text-group_7">数据统计</text>
            </view>
          </view>
        </view>
        <view class="group_10 flex-col">
          <view class="section_1 flex-row justify-between">
            <view class="text-group_8 flex-col justify-between">
              <text class="text_4">今日数据</text>
              <text class="text_5">奶量</text>
            </view>
            <text class="text_6">480ml&nbsp;/&nbsp;600ml</text>
          </view>
          <image
            class="image_2"
            referrerpolicy="no-referrer"
            src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG147e32dc12d3d513fb129bc520324372.png"
          />
          <view class="text-wrapper_2 flex-row justify-between">
            <text class="text_7">睡眠</text>
            <text class="text_8">12h&nbsp;/&nbsp;14h</text>
          </view>
          <image
            class="image_3"
            referrerpolicy="no-referrer"
            src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG6979d3ff1d15f6e960bb560df266b3ba.png"
          />
        </view>
      </view>
    </view>
  </view>
</template><script>
export default {
  data() {
    return {
      constants: {},
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  width: 100%; /* 375px -> 750rpx */
  height: calc(100vh - 100rpx);
  overflow: hidden;
  .group_1 {
    background-color: rgba(249, 250, 251, 1);
    width: 100%; /* 375px -> 750rpx */
    height: 100%; /* 812px -> 1624rpx */
    .text-wrapper_1 {
      box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
      background-color: rgba(255, 255, 255, 1);
      height: 84rpx; /* 42px -> 84rpx */
      width: 750rpx; /* 375px -> 750rpx */
	  align-items: center;
	  justify-content: center;
      .text_1 {
        width: 190rpx; /* 95px -> 190rpx */
        height: 50rpx; /* 25px -> 50rpx */
        overflow-wrap: break-word;
        color: rgba(31, 41, 55, 1);
        font-size: 30rpx; /* 15px -> 30rpx */
        font-family: Roboto-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 50rpx; /* 15px -> 30rpx */
        margin: 0 0 0 0; /* 9px 0 0 141px -> 18rpx 0 0 282rpx */
      }
    }
    .block_1 {
      width: 750rpx; /* 375px -> 750rpx */
      // height: 1430rpx; /* 715px -> 1430rpx */
	  flex: 1;
      .group_2 {
        box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
        background-color: rgba(255, 255, 255, 1);
        width: 694rpx; /* 347px -> 694rpx */
        height: 168rpx; /* 84px -> 168rpx */
        margin: 14rpx 0 0 28rpx; /* 7px 0 0 14px -> 14rpx 0 0 28rpx */
        .image-text_1 {
          width: 262rpx; /* 131px -> 262rpx */
          height: 112rpx; /* 56px -> 112rpx */
          margin: 28rpx 0 0 28rpx; /* 14px 0 0 14px -> 28rpx 0 0 28rpx */
          .image_1 {
            width: 112rpx; /* 56px -> 112rpx */
            height: 112rpx; /* 56px -> 112rpx */
          }
          .text-group_1 {
            width: 122rpx; /* 61px -> 122rpx */
            height: 78rpx; /* 39px -> 78rpx */
            margin-top: 18rpx; /* 9px -> 18rpx */
            .text_2 {
              width: 84rpx; /* 42px -> 84rpx */
              height: 42rpx; /* 21px -> 42rpx */
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 28rpx; /* 14px -> 28rpx */
              font-family: Roboto-Medium;
              font-weight: 500;
              text-align: left;
              white-space: nowrap;
              line-height: 42rpx; /* 21px -> 42rpx */
            }
            .text_3 {
              width: 122rpx; /* 61px -> 122rpx */
              height: 36rpx; /* 18px -> 36rpx */
              overflow-wrap: break-word;
              color: rgba(107, 114, 128, 1);
              font-size: 24rpx; /* 12px -> 24rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx; /* 12px -> 24rpx */
            }
          }
        }
      }
      .group_3 {
        width: 696rpx; /* 348px -> 696rpx */
        height: 154rpx; /* 77px -> 154rpx */
        margin: 28rpx 0 0 28rpx; /* 14px 0 0 14px -> 28rpx 0 0 28rpx */
        .block_2 {
          background-color: rgba(59, 130, 246, 1);
          width: 334rpx; /* 167px -> 334rpx */
          height: 154rpx; /* 77px -> 154rpx */
          .image-text_2 {
            width: 112rpx; /* 56px -> 112rpx */
            height: 98rpx; /* 49px -> 98rpx */
            margin: 28rpx 0 0 112rpx; /* 14px 0 0 56px -> 28rpx 0 0 112rpx */
            .label_1 {
              width: 48rpx; /* 24px -> 48rpx */
              height: 48rpx; /* 24px -> 48rpx */
              margin-left: 32rpx; /* 16px -> 32rpx */
            }
            .text-group_2 {
              width: 112rpx; /* 56px -> 112rpx */
              height: 42rpx; /* 21px -> 42rpx */
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 28rpx; /* 14px -> 28rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: center;
              white-space: nowrap;
              line-height: 42rpx; /* 21px -> 42rpx */
              margin-top: 8rpx; /* 4px -> 8rpx */
            }
          }
        }
        .block_3 {
          background-color: rgba(244, 114, 182, 1);
          width: 334rpx; /* 167px -> 334rpx */
          height: 154rpx; /* 77px -> 154rpx */
          .image-text_3 {
            width: 112rpx; /* 56px -> 112rpx */
            height: 98rpx; /* 49px -> 98rpx */
            margin: 28rpx 0 0 110rpx; /* 14px 0 0 55px -> 28rpx 0 0 110rpx */
            .label_2 {
              width: 48rpx; /* 24px -> 48rpx */
              height: 48rpx; /* 24px -> 48rpx */
              margin-left: 32rpx; /* 16px -> 32rpx */
            }
            .text-group_3 {
              width: 112rpx; /* 56px -> 112rpx */
              height: 42rpx; /* 21px -> 42rpx */
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 28rpx; /* 14px -> 28rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: center;
              white-space: nowrap;
              line-height: 42rpx; /* 21px -> 42rpx */
              margin-top: 8rpx; /* 4px -> 8rpx */
            }
          }
        }
      }
      .group_4 {
        width: 696rpx; /* 348px -> 696rpx */
        height: 190rpx; /* 95px -> 190rpx */
        margin: 42rpx 0 0 28rpx; /* 21px 0 0 14px -> 42rpx 0 0 28rpx */
        .group_5 {
          box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
          background-color: rgba(255, 255, 255, 1);
          width: 334rpx; /* 167px -> 334rpx */
          height: 190rpx; /* 95px -> 190rpx */
          .image-text_4 {
            width: 98rpx; /* 49px -> 98rpx */
            height: 134rpx; /* 67px -> 134rpx */
            margin: 28rpx 0 0 118rpx; /* 14px 0 0 59px -> 28rpx 0 0 118rpx */
            .label_3 {
              width: 84rpx; /* 42px -> 84rpx */
              height: 84rpx; /* 42px -> 84rpx */
              margin-left: 8rpx; /* 4px -> 8rpx */
            }
            .text-group_4 {
              width: 98rpx; /* 49px -> 98rpx */
              height: 36rpx; /* 18px -> 36rpx */
              overflow-wrap: break-word;
              color: rgba(55, 65, 81, 1);
              font-size: 24rpx; /* 12px -> 24rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx; /* 12px -> 24rpx */
              margin-top: 14rpx; /* 7px -> 14rpx */
            }
          }
        }
        .group_6 {
          box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
          background-color: rgba(255, 255, 255, 1);
          width: 334rpx; /* 167px -> 334rpx */
          height: 190rpx; /* 95px -> 190rpx */
          .image-text_5 {
            width: 98rpx; /* 49px -> 98rpx */
            height: 134rpx; /* 67px -> 134rpx */
            margin: 28rpx 0 0 118rpx; /* 14px 0 0 59px -> 28rpx 0 0 118rpx */
            .label_4 {
              width: 84rpx; /* 42px -> 84rpx */
              height: 84rpx; /* 42px -> 84rpx */
              margin-left: 6rpx; /* 3px -> 6rpx */
            }
            .text-group_5 {
              width: 98rpx; /* 49px -> 98rpx */
              height: 36rpx; /* 18px -> 36rpx */
              overflow-wrap: break-word;
              color: rgba(55, 65, 81, 1);
              font-size: 24rpx; /* 12px -> 24rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx; /* 12px -> 24rpx */
              margin-top: 14rpx; /* 7px -> 14rpx */
            }
          }
        }
      }
      .group_7 {
        width: 696rpx; /* 348px -> 696rpx */
        height: 190rpx; /* 95px -> 190rpx */
        margin: 26rpx 0 0 28rpx; /* 13px 0 0 14px -> 26rpx 0 0 28rpx */
        .group_8 {
          box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
          background-color: rgba(255, 255, 255, 1);
          width: 334rpx; /* 167px -> 334rpx */
          height: 190rpx; /* 95px -> 190rpx */
          .image-text_6 {
            width: 98rpx; /* 49px -> 98rpx */
            height: 134rpx; /* 67px -> 134rpx */
            margin: 28rpx 0 0 118rpx; /* 14px 0 0 59px -> 28rpx 0 0 118rpx */
            .label_5 {
              width: 84rpx; /* 42px -> 84rpx */
              height: 84rpx; /* 42px -> 84rpx */
              margin-left: 8rpx; /* 4px -> 8rpx */
            }
            .text-group_6 {
              width: 98rpx; /* 49px -> 98rpx */
              height: 36rpx; /* 18px -> 36rpx */
              overflow-wrap: break-word;
              color: rgba(55, 65, 81, 1);
              font-size: 24rpx; /* 12px -> 24rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx; /* 12px -> 24rpx */
              margin-top: 14rpx; /* 7px -> 14rpx */
            }
          }
        }
        .group_9 {
          box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
          background-color: rgba(255, 255, 255, 1);
          width: 334rpx; /* 167px -> 334rpx */
          height: 190rpx; /* 95px -> 190rpx */
          .image-text_7 {
            width: 98rpx; /* 49px -> 98rpx */
            height: 134rpx; /* 67px -> 134rpx */
            margin: 28rpx 0 0 118rpx; /* 14px 0 0 59px -> 28rpx 0 0 118rpx */
            .label_6 {
              width: 84rpx; /* 42px -> 84rpx */
              height: 84rpx; /* 42px -> 84rpx */
              margin-left: 6rpx; /* 3px -> 6rpx */
            }
            .text-group_7 {
              width: 98rpx; /* 49px -> 98rpx */
              height: 36rpx; /* 18px -> 36rpx */
              overflow-wrap: break-word;
              color: rgba(55, 65, 81, 1);
              font-size: 24rpx; /* 12px -> 24rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx; /* 12px -> 24rpx */
              margin-top: 14rpx; /* 7px -> 14rpx */
            }
          }
        }
      }
      .group_10 {
        box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05); /* 0px 1px 2px -> 0px 2rpx 4rpx */
        background-color: rgba(255, 255, 255, 1);
        width: 694rpx; /* 347px -> 694rpx */
        height: 266rpx; /* 133px -> 266rpx */
        justify-content: flex-center;
        margin: 42rpx 0 0 28rpx; /* 21px 0 155px 14px -> 42rpx 0 310rpx 28rpx */
        .section_1 {
          width: 640rpx; /* 320px -> 640rpx */
          height: 106rpx; /* 53px -> 106rpx */
          margin: 28rpx 0 0 28rpx; /* 14px 0 0 14px -> 28rpx 0 0 28rpx */
          .text-group_8 {
            width: 112rpx; /* 56px -> 112rpx */
            height: 106rpx; /* 53px -> 106rpx */
            .text_4 {
              width: 112rpx; /* 56px -> 112rpx */
              height: 42rpx; /* 21px -> 42rpx */
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 28rpx; /* 14px -> 28rpx */
              font-family: Roboto-Medium;
              font-weight: 500;
              text-align: left;
              white-space: nowrap;
              line-height: 42rpx; /* 21px -> 42rpx */
            }
            .text_5 {
              width: 50rpx; /* 25px -> 50rpx */
              height: 36rpx; /* 18px -> 36rpx */
              overflow-wrap: break-word;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx; /* 12px -> 24rpx */
              font-family: Roboto-Regular;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 24rpx; /* 12px -> 24rpx */
              margin-top: 28rpx; /* 14px -> 28rpx */
            }
          }
          .text_6 {
            width: 160rpx; /* 80px -> 160rpx */
            height: 36rpx; /* 18px -> 36rpx */
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 24rpx; /* 12px -> 24rpx */
            font-family: Roboto-Regular;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx; /* 12px -> 24rpx */
            margin-top: 70rpx; /* 35px -> 70rpx */
          }
        }
        .image_2 {
          width: 638rpx; /* 319px -> 638rpx */
          height: 14rpx; /* 7px -> 14rpx */
          margin: 6rpx 0 0 28rpx; /* 3px 0 0 14px -> 6rpx 0 0 28rpx */
        }
        .text-wrapper_2 {
          width: 640rpx; /* 320px -> 640rpx */
          height: 36rpx; /* 18px -> 36rpx */
          margin: 28rpx 0 0 28rpx; /* 14px 0 0 14px -> 28rpx 0 0 28rpx */
          .text_7 {
            width: 50rpx; /* 25px -> 50rpx */
            height: 36rpx; /* 18px -> 36rpx */
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 24rpx; /* 12px -> 24rpx */
            font-family: Roboto-Regular;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx; /* 12px -> 24rpx */
          }
          .text_8 {
            width: 106rpx; /* 53px -> 106rpx */
            height: 36rpx; /* 18px -> 36rpx */
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 24rpx; /* 12px -> 24rpx */
            font-family: Roboto-Regular;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 24rpx; /* 12px -> 24rpx */
          }
        }
        .image_3 {
          width: 638rpx; /* 319px -> 638rpx */
          height: 14rpx; /* 7px -> 14rpx */
          margin: 6rpx 0 14rpx 28rpx; /* 3px 0 14px 14px -> 6rpx 0 14rpx 28rpx */
        }
      }
    }
    .block_4 {
      background-color: rgba(255, 255, 255, 1);
      width: 750rpx; /* 375px -> 750rpx */
      height: 114rpx; /* 57px -> 114rpx */
      border: 2rpx solid rgba(229, 231, 235, 1); /* 1px -> 2rpx */
      margin: -2rpx 0 2rpx 0; /* -1px 0 1px 0 -> -2rpx 0 2rpx 0 */
      .image-text_8 {
        width: 48rpx; /* 24px -> 48rpx */
        height: 82rpx; /* 41px -> 82rpx */
        margin: 16rpx 0 0 70rpx; /* 8px 0 0 35px -> 16rpx 0 0 70rpx */
        .label_7 {
          width: 48rpx; /* 24px -> 48rpx */
          height: 48rpx; /* 24px -> 48rpx */
        }
        .text-group_9 {
          width: 42rpx; /* 21px -> 42rpx */
          height: 28rpx; /* 14px -> 28rpx */
          overflow-wrap: break-word;
          color: rgba(59, 130, 246, 1);
          font-size: 20rpx; /* 10px -> 20rpx */
          font-family: Roboto-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 28rpx; /* 14px -> 28rpx */
          margin: 6rpx 0 0 4rpx; /* 3px 0 0 2px -> 6rpx 0 0 4rpx */
        }
      }
      .image-text_9 {
        width: 48rpx; /* 24px -> 48rpx */
        height: 82rpx; /* 41px -> 82rpx */
        margin: 16rpx 0 0 140rpx; /* 8px 0 0 70px -> 16rpx 0 0 140rpx */
        .label_8 {
          width: 48rpx; /* 24px -> 48rpx */
          height: 48rpx; /* 24px -> 48rpx */
        }
        .text-group_10 {
          width: 42rpx; /* 21px -> 42rpx */
          height: 28rpx; /* 14px -> 28rpx */
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 20rpx; /* 10px -> 20rpx */
          font-family: Roboto-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 28rpx; /* 14px -> 28rpx */
          margin: 6rpx 0 0 4rpx; /* 3px 0 0 2px -> 6rpx 0 0 4rpx */
        }
      }
      .image-text_10 {
        width: 48rpx; /* 24px -> 48rpx */
        height: 82rpx; /* 41px -> 82rpx */
        margin: 16rpx 0 0 140rpx; /* 8px 0 0 70px -> 16rpx 0 0 140rpx */
        .label_9 {
          width: 48rpx; /* 24px -> 48rpx */
          height: 48rpx; /* 24px -> 48rpx */
        }
        .text-group_11 {
          width: 42rpx; /* 21px -> 42rpx */
          height: 28rpx; /* 14px -> 28rpx */
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 20rpx; /* 10px -> 20rpx */
          font-family: Roboto-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 28rpx; /* 14px -> 28rpx */
          margin: 6rpx 0 0 2rpx; /* 3px 0 0 1px -> 6rpx 0 0 2rpx */
        }
      }
      .image-text_11 {
        width: 48rpx; /* 24px -> 48rpx */
        height: 82rpx; /* 41px -> 82rpx */
        margin: 16rpx 68rpx 0 140rpx; /* 8px 34px 0 70px -> 16rpx 68rpx 0 140rpx */
        .label_10 {
          width: 48rpx; /* 24px -> 48rpx */
          height: 48rpx; /* 24px -> 48rpx */
        }
        .text-group_12 {
          width: 42rpx; /* 21px -> 42rpx */
          height: 28rpx; /* 14px -> 28rpx */
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 20rpx; /* 10px -> 20rpx */
          font-family: Roboto-Regular;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 28rpx; /* 14px -> 28rpx */
          margin: 6rpx 0 0 2rpx; /* 3px 0 0 1px -> 6rpx 0 0 2rpx */
        }
      }
    }
  }
}
</style>
